<template>
  <div class="login-container">
    <div
      id="gradeFiveChart"
      :style="{ width: '95%', height: '350px' }"
    />
  </div>
</template>

<script scope>
// import echarts from "echarts";
import { getMsgSuccPercentReport } from '@/api/echarts'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      suc: 0,
      err: 0
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getMsgSuccPercentReport()
  },
  mounted() {
    setTimeout(() => {
      this.drawLine()
    }, 1000)
  },
  methods: {
    getMsgSuccPercentReport() {
      getMsgSuccPercentReport().then((res) => {
        // console.log(res.data.data);
        this.suc = res.data.data[0].value
        this.err = res.data.data[1].value
        this.drawLine()
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const gradeFiveChart = this.$echarts.init(
        document.getElementById('gradeFiveChart')
      )
      // 绘制图表
      gradeFiveChart.setOption({
        title: {
          text: '短信下发成功率统计',
          // subtext: "Fake Data",
          left: 'center',
          top: '10'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}(条) ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        color: [
          '#45C2E0',
          '#1869A0',
          '#C1EBDD',
          '#FFC851',
          '#5A5476'

          // "#FF9393",
        ],
        series: [
          {
            name: '张数以及占比',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.suc, name: '下发成功' },
              { value: this.err, name: '未成功' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
